<template>
  <div class="home-container">
    首页。。。
    <hr />
    <router-link to="/home">首页</router-link>&nbsp;&nbsp;
    <!--1、在hash地址中，/ 后面的参数，叫"路径参数"，需要使用this.$route.params来获取参数-->
    <!--2、在hash地址中，? 后面的参数叫做"查询参数"，需要使用this.$route.query来获取参数-->
    <!--3、在this.$route中，path只是路径的部分（不带query），而fullpaht是完整的（带query参数）-->
    <a href="/movie/1">奇幻电影</a>&nbsp;&nbsp; <a href="/movie/2?name='zs'&age=18">灾难电影</a>&nbsp;&nbsp;
    <a href="/movie2?name='zs'&age=18">魔幻电影</a>&nbsp;&nbsp; <a href="/movie/3">爱情电影</a>&nbsp;&nbsp;
    <a href="/about">关于</a>
    <router-view></router-view>

    <hr />
    通过编程式路由跳转<br />
    <button @click="gotoMovie1">push去往奇幻电影1</button>
    <button @click="gotoMovie2">replace去往灾难电影2</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotoMovie1() {
      this.$router.push('/movie/1')
    },
    gotoMovie2() {
      this.$router.replace('/movie/2')
    },
  },
}
</script>

<style scoped>
.home-container {
  min-height: 250px;
  background-color: orange;
}
</style>
